<template>
  <div class="rightEcharts">
    <div ref="rightechart" class="leftEcharts" style="width:430px;height:300px" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      var myChart = echarts.init(this.$refs.rightechart)
      // 指定图表的配置项和数据
      const option = {
        color: ['#91b0ff'],

        title: {
          subtext: '单位：元',
          left: '50px'
        },
        grid: {
          x: 70,
          x2: 70,
          y2: 55
        },
        xAxis: {
          type: 'category',
          data: ['北京平', '霍营街']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [46501, 7941],
            type: 'bar',
            barWidth: 20,
            itemStyle: {
              normal: {
                barBorderRadius: [5, 5, 0, 0]
              }
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>
<style lang='scss' scoped>
.rightEcharts{
width: 100% !important;
  height: 380px;
  //  margin-top: 20px;
}
</style>
